<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Lựa chọn danh mục/bài viết nổi bật</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{categoryBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!categoryBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <f:event type="preRenderView" listener="#{categoryBean.preSelectHotAction()}" />
        <h:form id="mainForm">
            <p:panel header="Lựa chọn danh mục/bài viết nổi bật">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;" rendered="#{categoryBean.category != null}">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Cập nhật" action="#{categoryBean.selectHotAction()}" update="mainForm"/>
                        <p:commandButton value="Hủy" action="#{categoryBean.cancelAction()}" immediate="true"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />  
                            <p:menuitem value="Danh sách danh mục" url="list.jsf" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
                
                <p:fieldset style="margin-bottom: 5px;" legend="Danh mục HOT" toggleable="true" toggleSpeed="500">
                    <p:pickList value="#{categoryBean.categoryModel}" var="category" itemLabel="#{category.name}" 
                                itemValue="#{category}" converter="categoryConverter"
                                showSourceControls="true" showTargetControls="true">
                        <f:facet name="sourceCaption">Danh sách danh mục</f:facet>  
                        <f:facet name="targetCaption">Danh mục HOT</f:facet>
                    </p:pickList>
                </p:fieldset>

                <p:fieldset legend="Bài viết HOT" toggleable="true" toggleSpeed="500">
                    <p:pickList value="#{categoryBean.itemModel}" var="item" itemLabel="#{item.name}" 
                                itemValue="#{item}" converter="itemConverter"
                                showSourceControls="true" showTargetControls="true">
                        <f:facet name="sourceCaption">Danh sách bài viết</f:facet>  
                        <f:facet name="targetCaption">Bài viết HOT</f:facet>
                    </p:pickList>
                </p:fieldset>
                
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;" rendered="#{categoryBean.category != null}">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Cập nhật" action="#{categoryBean.selectHotAction()}" update="mainForm"/>
                        <p:commandButton value="Hủy" action="#{categoryBean.cancelAction()}" immediate="true"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />  
                            <p:menuitem value="Danh sách danh mục" url="list.jsf" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>